<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="项目名称" style="width: 30%">
          <el-input v-model="formInline.user" placeholder="审批人" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="填写人部门" style="width: 30%">
          <el-input v-model="formInline.user" placeholder="审批人" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="状态" style="width: 30%">
          <el-select v-model="formInline.region" placeholder="活动区域" size="mini">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
        </el-form-item>
        <el-form-item label="填写人">
          <el-input v-model="formInline.user" placeholder="填写人" size="mini"></el-input>
        </el-form-item>
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="填写日期"
          end-placeholder="结束日期"
          align="right"
          size="mini">
        </el-date-picker>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="mini">清空</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div class="span">
      <el-form inline="true">
        <span>投标文件评审表</span>
        <el-button size="mini" type="info" style="float: right">历史查询</el-button>
        <el-button size="mini" type="info" style="float: right">导出</el-button>
        <el-button size="mini" type="info" disabled style="float: right">浏览
        </el-button>
        <el-button size="mini" type="info" disabled style="float: right">删除
        </el-button>
        <el-button size="mini" type="info" disabled style="float: right">修改
        </el-button>
      </el-form>
    </div>

    <el-table
      :data="bidList"
      border
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="proId"
        label="序号"
        width="55">
      </el-table-column>
      <el-table-column
        prop="proName"
        label="项目名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="proScale"
        label="项目规模">
      </el-table-column>
      <el-table-column
        prop="bidSub"
        label="委托方">
      </el-table-column>
      <el-table-column
        prop="designStage.designStageName"
        label="设计阶段">
      </el-table-column>
      <el-table-column
        prop="emp.dept.deptName"
        label="部门">
      </el-table-column>
      <el-table-column
        prop="insertDate"
        label="填写日期">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Operations",
  data() {
    return {
      //投标信息一览
      bidList: [],
      total: 0,
      currentPage: 1,
      pageSize: 5,
      pageSizes: [10, 50, 100, 200],
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  methods: {
    //查询所有投标任务信息
    selectAllBid: function () {
      this.axios({
        method: 'get',
        url: 'http://localhost:9001/bid/selectAll'
      }).then(response => {
        this.bidList = response.data.bidData;
        this.total = response.data.total;
      })
    },
    //每页显示条数
    handleSizeChange(val) {
      this.pageSize = val;
    },
    //当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  mounted() {
    this.selectAllBid();
  }
}
</script>

<style scoped>
.span {
  text-align: left;
}

.button-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
